<template>
    <el-card>
        <div class="title-bar">
            <div>
                <div></div>
                <span>新建居民档案</span>
            </div>
        </div>

        <el-form ref="ruleFormRef" :rules="rules" label-width="auto" :inline="true" :model="residentData"
            class="demo-form-inline" style="--el-font-size-base:13px;">
            <div class="message-bar">
                <span>居民信息</span>

                <el-row :gutter="80">
                    <el-col :span="8">
                        <el-form-item label="居民编号">
                            <div>{{ residentData._id }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input placeholder="请输入" v-model="residentData.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居民头像">
                            <el-upload class="avatar-uploader" :action="`${baseURL}/images/upload`"
                                :show-file-list="false" :on-success="handleAvatarSuccess">
                                <div class="avatar-bar" style="width: 40px;">
                                    <img v-if="residentData.image" :src="residentData.image" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <UserFilled />
                                    </el-icon>
                                </div>

                                <div class="addPart"
                                    style="color: #2984F8;width: 100px;line-height: 40px;margin-left: 5px;">
                                    +点击上传</div>

                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号" prop="IDnumber">
                            <el-input placeholder="请输入" v-model="residentData.IDnumber"></el-input>
                        </el-form-item>
                    </el-col><el-col :span="8">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input placeholder="请输入" v-model="residentData.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居民标签">
                            <el-select v-model="residentData.tags" clearable>
                                <el-option value="" label="请选择" />
                                <el-option v-for="item in tagData" :label="item.name" :key="item._id"
                                    :value="item._id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="现居地">
                            <el-input placeholder="请输入" v-model="residentData.address" style="width: 578px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="行政区划">
                            <el-input placeholder="请输入" v-model="residentData.administrativeRegion"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="户籍地址">
                            <el-input placeholder="请输入" style="width: 578px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="家庭成员">
                            <div class="addPart"
                                style="color: #2984F8;width: 100px;line-height: 40px;margin-left: 5px;cursor: pointer;"
                                @click="addRelation">
                                +关联家庭成员</div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div class="message-bar">
                <el-row :gutter="80">
                    <el-col :span="8">
                        <el-form-item label="性别">
                            <el-select clearable v-model="residentData.gender">
                                <el-option value="" label="请选择" />
                                <el-option value="1" label="男" />
                                <el-option value="0" label="女" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出生年月">
                            <el-date-picker v-model="residentData.birthday" type="date" placeholder="请选择日期"
                                style="width: 200px;height: 40px;" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="户籍">
                            <el-input placeholder="请输入" v-model="residentData.origin"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="民族">
                            <el-select clearable v-model="residentData.nation">
                                <el-option value="" label="请选择" />
                                <el-option value="汉族" label="汉族" />
                                <el-option value="回族" label="回族" />
                                <el-option value="维吾尔族" label="维吾尔族" />
                                <el-option value="壮族" label="壮族" />
                                <el-option value="其他少数民族" label="其他少数民族" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="文化程度">
                            <el-select clearable v-model="residentData.culture">
                                <el-option value="" label="请选择" />
                                <el-option value="小学" label="小学" />
                                <el-option value="初中" label="初中" />
                                <el-option value="高中" label="高中" />
                                <el-option value="大专" label="大专" />
                                <el-option value="本科" label="本科" />
                                <el-option value="其他" label="其他" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="婚姻状况">
                            <el-select clearable v-model="residentData.maritalStatus">
                                <el-option value="" label="请选择" />
                                <el-option value="未婚" label="未婚" />
                                <el-option value="已婚" label="已婚" />
                                <el-option value="离异" label="离异" />
                                <el-option value="丧偶" label="丧偶" />
                                <el-option value="不详" label="不详" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="职业">
                            <el-input placeholder="请输入" v-model="residentData.profession"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="工作单位">
                            <el-input placeholder="请输入" v-model="residentData.workUnit"
                                style="width: 578px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="紧急联系人">
                            <el-input placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="紧急电话">
                            <el-input placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="登陆密码">
                            <el-input placeholder="请输入" v-model="residentData.password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>


            <div class="message-bar">
                <el-row :gutter="80">
                    <el-col :span="8">
                        <el-form-item label="户籍类型">
                            <el-select clearable v-model="residentData.domicileType">
                                <el-option value="" label="请选择" />
                                <el-option value="城镇" label="城镇" />
                                <el-option value="农村" label="农村" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="定点医疗单位">
                            <el-input placeholder="请输入" v-model="residentData.hospital"
                                style="width: 578px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="费用类型">
                            <el-checkbox-group v-model="residentData.costType" style="width: auto;">
                                <el-checkbox label="自费" value="自费" />
                                <el-checkbox label="社会医疗保险" value="社会医疗保险" />
                                <el-checkbox label="商业保险" value="商业保险" />
                                <el-checkbox label="新农合" value="新农合" />
                                <el-checkbox label="其他" value="其他" />
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>

                </el-row>
            </div>
            <div class="message-bar">
                <el-row :gutter="80">
                    <el-col :span="8">
                        <div class="long-bar">
                            <el-form-item label="身高" style="margin: 0;">
                                <el-input placeholder="请输入" v-model="residentData.height"></el-input>

                            </el-form-item>
                            <span
                                style="display: inline;font-size: 13px;color: #999;line-height: 40px;margin: 0;margin-left: 6px;">cm</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="long-bar">
                            <el-form-item label="体重" style="margin: 0;">
                                <el-input placeholder="请输入" v-model="residentData.weight"></el-input>
                            </el-form-item>
                            <span
                                style="display: inline;font-size: 13px;color: #999;line-height: 40px;margin: 0;margin-left: 6px;">kg</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="血型">
                            <el-select clearable v-model="residentData.bloodType">
                                <el-option value="" label="请选择" />
                                <el-option value="A" label="A型" />
                                <el-option value="B" label="B型" />
                                <el-option value="O" label="O型" />
                                <el-option value="AB" label="AB型" />
                                <el-option value="不详" label="不详" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="RH阴性">
                            <el-select clearable v-model="residentData.RH">
                                <el-option value="" label="请选择" />
                                <el-option value="0" label="是" />
                                <el-option value="1" label="否" />
                                <el-option value="2" label="不详" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="过敏史">
                            <el-radio-group v-model="residentData.allergy">
                                <el-radio value="">无</el-radio>
                                <el-radio value="1">有</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="既往史">
                            <el-radio-group v-model="residentData.pastMedical">
                                <el-radio value="">无</el-radio>
                                <el-radio value="1">有</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="就诊史">
                            <el-radio-group v-model="residentData.outpatients">
                                <el-radio value="">无</el-radio>
                                <el-radio value="1">有</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="家族病史">
                            <el-radio-group v-model="residentData.familyMedical">
                                <el-radio value="">无</el-radio>
                                <el-radio value="1">有</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>


                </el-row>
            </div>

        </el-form>




        <div class="button-bar">
            <el-button type="primary" @click="toUpdate(ruleFormRef)">保存</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>
    </el-card>
    <AddRelation ref="relationRef" @getResidentDetail="getResidentDetail"></AddRelation>
</template>

<script setup>
import { onMounted, ref, useTemplateRef } from 'vue';
import { getREsidentDetailApi, upDateREsidentApi, updateResidentDetailApi } from '../../api/resident';
import { useRoute } from 'vue-router';
import AddRelation from './AddRelation.vue';

const route = useRoute()
const router = useRouter()

onMounted(() => {
    getResidentDetail()
})

// 居民数据详情
const residentData = ref({
    tags: '',
    image: ''

})

const relationRef = useTemplateRef('relationRef')

function addRelation() {
    relationRef.value?.addRelationship(residentData.value._id)
}

// 保存
const toUpdate = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            upDateResident()
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}



// 表单验证
const rules = ref({
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },

    ],
    name: [
        {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
        },
    ],
    IDnumber: [
        {
            required: true,
            message: '身份证号不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur',
        },
    ],
})
const ruleFormRef = ref()

// 获取居民详情
function getResidentDetail() {
    getREsidentDetailApi({ _id: route.params._id })
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data
            }
        })
}

onMounted(() => {
    findTag()
})



// 修改居民信息
function upDateResident() {
    updateResidentDetailApi({
        ...residentData.value
    })
        .then(res => {
            if (res.code == 200) {
                router.back()
                ElMessage({
                    message: '居民信息保存成功',
                    type: 'success',
                })

            } else {
                ElMessage.error(res.message)
            }
        })
}

// 标签数据
const tagData = ref([])

function findTag() {
    findTagsApi()
        .then(res => {
            if (res.code == 200) {
                tagData.value = res.data.rows
            }
        })
}

// 图片上传
import { UserFilled } from '@element-plus/icons-vue'
import { findTagsApi } from '../../api/tags';
import { useRouter } from 'vue-router';
const baseURL = import.meta.env.VITE_BASE_URL;
const handleAvatarSuccess = (
    res
) => {

    console.log(residentData.value.image);

    if (res.code == 200) {
        residentData.value.image = res.data;
    }
}



const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

// 跳转编辑页


</script>

<style scoped>
.title-bar {
    height: 40px;
    border-bottom: 1px solid #dbdbdb;

}

.title-bar>view {
    height: 20px;
    display: flex;
    align-items: center;
}

.title-bar>view>view {
    height: 20px;
    background-color: var(--el-color-primary);
    width: 6px;
    border-radius: 16px;
    margin-right: 15px;
}

.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}

.message-bar span {
    display: inline-block;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.message-bar {
    border-bottom: 0.3px solid #e6e6e6;
    margin-top: 20px;
    padding-bottom: 5px;
}

.el-form-item div {
    height: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 13px;
    color: #333;
}




.el-input,
.el-select {
    width: 200px;
    height: 40px;
}

.el-form-item {
    margin-right: 100px;
    margin-bottom: 15px;
}

.button-bar {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 头像 */
.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.avatar-bar {
    width: 40px;
    height: 40px;
    background-color: rgb(242, 242, 242);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 20px;
    height: 20px;
    text-align: center;
}

.long-bar {
    display: inline-block;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.long-bar span {
    margin-left: 6px;
}
</style>
<style>
.message-bar {
    border-bottom: 0.3px solid #e6e6e6 !important;
    margin-top: 20px;
    padding-bottom: 5px;
}
</style>